<template>
  <div class="app-container">
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <div class="buttonBox">
      <el-button type="primary" @click="submit(true)">提交</el-button>
      <el-button type="danger" @click="submit(false)">清空</el-button>
    </div>
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getCashRuleApi, postEditCashRuleApi } from '@/api/system/cashRule.js'
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p></p>')
const mode = ref('simple')
const toolbarConfig = {
  toolbarKeys: [
    // 菜单 key
    'headerSelect',
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    // 'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    // 'uploadImage', // 上传图片
    'delIndent', // 缩进
    'indent', // 增进
    'deleteImage', //删除图片
    'divider', // 分割线
    'insertTable', // 插入表格
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'undo', // 撤销
    'redo', // 重做
    'clearStyle' // 清除格式
  ]
}
const editorConfig = {
  placeholder: '请输入内容...'
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

/** 创建编辑器 */
const handleCreated = (editor) => {
  console.log(editor)
  editorRef.value = editor // 记录 editor 实例，重要！
}
/** 获取规则 */
function getCashRule() {
  getCashRuleApi().then((res) => {
    console.log(res.data.rule)
    if (res && res.data) {
      valueHtml.value = res.data.rule
      id.value = res.data.id
    }
  })
}
const id = ref()
/** 提交或者删除数据 */
async function submit(type) {
  if (!type) {
    await ElMessageBox.confirm('点击清空则会清空线上提现规则，你还要继续吗？', {
      title: '是否清空',
      confirmButtonText: '继续',
      cancelButtonText: '取消',
      type: 'warning',
      center: false
    }).then(() => {
      valueHtml.value = ''
    })
  }
  const _param = {
    id: id.value,
    rule: valueHtml.value
  }
  postEditCashRuleApi(_param)
  ElMessage.success(!type ? '清空成功' : '提交成功')
}
onMounted(() => {
  getCashRule()
})
</script>

<style lang="scss" scoped>
.buttonBox {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
